<template>
	<view class="detailedInformation_box">
		<view class="other_box" v-if="details.info.studioBalanceRecordNewPetVO&&userInfo.identity==1&&details.info.userId!=userInfo.id">
			<view class="lf lf-center">
				<image class="other_accounts_img" :src="details.info?.studioBalanceRecordNewPetVO.petAvatar"></image>
				<view class="">
					<view class="other_name">{{details.info?.studioBalanceRecordNewPetVO.petRealName}} | {{details.info?.studioBalanceRecordNewPetVO.petNickName}}</view>
					<view class="xjs-size-24 account_num">
						手机号：{{details.info?.studioBalanceRecordNewPetVO.phone}}
					</view>
				</view>
			</view>
		</view>
		<view class="detailed_status_box">
			<view class="detailed_type" v-if="details.info.type==1">服务订单——服务收益</view>
			<view class="detailed_type" v-else-if="details.info.type==2">商城订单——推广收益</view>
			<view class="detailed_type" v-else-if="details.info.type==3">提现成功</view>
			<view class="detailed_type" v-else>服务订单——推广收益</view>
			<!-- <view class="detailed_type" v-if="details.info.type==1">服务收益</view>
			<view class="detailed_type" v-else-if="details.info.type==2">平台服务费</view>
			<view class="detailed_type" v-else-if="details.info.type==3">提现</view>
			<view class="detailed_type" v-else-if="details.info.type==4">推广收益</view>
			<view class="detailed_type" v-else>工作室接单服务费</view> -->
			<view class="detailed_money ">¥{{details.info.balance}}</view>
			<!-- <view class="detailed_money reduce_color" v-else> - ¥ {{details.info.amount}}</view> -->
		</view>
		<view class="detailed_detail">
			<view class="label_box" @tap="goOrder(details.info.sourceId)">
				<text class="label_text">关联订单</text>
				<view class="value_box">
					<text class="order_no">{{details.info.sourceId}}</text>
					<uni-icons type="right" size="16"></uni-icons>
					<!-- <view class="copy_btn" @click="onCopy(details.info.sourceId)">复制</view> -->
				</view>
			</view>
			<view class="label_box">
				<text class="label_text">创建时间</text>
				<view class="value_box">{{details.info.createTime}}</view>
			</view>
			<view class="label_box" v-if="details.info.balanceAfter">
				<text class="label_text">账号余额</text>
				<view class="value_box">¥{{details.info.balanceAfter}}</view>
			</view>
			<view class="label_box" v-if="details.info.remark">
				<text class="label_text">备注</text>
				<view class="value_box"> {{details.info.remark}}</view>
			</view>
		</view>

	</view>
</template>
<script setup lang="ts">
	import { reactive ,onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { useUserStoreToRefs } from "@/store/useUserStore";
	let { userInfo } = useUserStoreToRefs();
	import api from '@/api'
	let details = reactive<any>({
		id: '',
		info: {},
		type:''
	})
	onLoad((option) => {
		details.id = option.id
		details.type = option.type
	})

	const onCopy = (id : any) => {
		uni.setClipboardData({
			data: id
		})
	}
	const getDetails = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/studioBalanceChange/${details.id}`
		})
		details.info = res.data
	}
	const goOrder = (id) => {
		let url
		if(details.info.orderType=='0'){
			url = `/pages/studioOrders/orderDetail/index?id=${id}&orderType=0&pageSource=1`     //主服务
		}
		if(details.info.orderType=='1'){
			url = `/pages/studioOrders/addedServicesDetail/index?id=${id}&orderType=0&pageSource=1`  //增值服务
		}
		if(details.info.orderType=='2'){
			url = `/pages/shopping/orderDetailes/index?orderId=${id}`  //商城订单
		}
		if(details.info.orderType=='3'){
			url = `/pages/income/recordDateils/index?id=${id}&type=${details.info.userId?'2':'1'}`  //提现记录
		}
		uni.navigateTo({
			url
		})
	}
	onMounted(() => {
		getDetails()
	})
</script>
<style scoped lang="scss">
	.lf {
		display: flex;
	}
	.lf-between {
		justify-content: space-between;
	}
	.lf-center {
		align-items: center;
	}
	.lf-around {
		justify-content: space-around;
	}
	.other_box{
		background-color: #ffffff;
		border-radius: 24rpx;
		width: 672rpx;
		margin: 32rpx auto;
		padding-bottom: 32rpx;
		.other_accounts_img{
			margin: 32rpx 32rpx 0 24rpx;
			width: 84rpx;
			height: 84rpx;
			border-radius: 42rpx;
		}
		.other_name{
			margin-top: 20rpx;
			font-size: 30rpx;
		}
	}
	.detailedInformation_box {
		padding: 32rpx;
		box-sizing: border-box;

		.detailed_status_box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 48rpx 0;
			text-align: center;

			.detailed_type {
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
			}

			.detailed_money {
				font-weight: bold;
				font-size: 56rpx;
				color: #1B2120;
				margin-top: 48rpx;
			}

			.reduce_color {
				color: #6363FF;
			}
		}

		.detailed_detail {
			margin-top: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.label_box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 48rpx;

				.label_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}

				.value_box {
					display: flex;
					flex-direction: row;
					font-weight: 400;
					font-size: 28rpx;
					color: #1A1A1A;
					max-width: 420rpx;
					word-break: break-all;
					text-align: right;

					.order_no {}

					.copy_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 82rpx;
						height: 40rpx;
						background: var(--color-primary);
						border-radius: 38rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
					}
				}
			}

			.label_box:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>